<template>
	<view :style="viewColor">
		<view style="position: sticky;top: 0;z-index: 10;">
			<view class="head-wrapper" :style="'padding-top:'+statusBarHeight+';height:126rpx'">
				<view class="head-menu">
					<view class='iconfont icon-xiangzuo' @click="returns"></view>
					<view class="iconfont icon-shouye4" @click="goHome"></view>
				</view>
				<view class="head-title">
					<view>{{navigationBarTitle}}</view>
					<view class="send_community" @click="goUrl('/pages/plantGrass/plant_release/index?type=3')">+发布</view>
				</view>
			</view>
			<view class="navTabBox">
				<view class="popular_circle_tag" v-if="is_label == 1">
					<!-- <swiper class="popular_circle_tag_list" acceleration display-multiple-items="4" style="height: 70rpx;" @change="tap2">
						<swiper-item class="popular_circle_tag_item" v-for="(item,index) in labelList" :key='index' :class="label_id == item.label_id ? 'popular_circle_tag_item_on' : ''" :id="'id'+index" @click="tap(index)" style="line-height: 40rpx;">
							{{item.label_name}}
						</swiper-item>
					</swiper> -->
					<scroll-view class="nav-label-list" scroll-x="true" scroll-with-animation="true"  show-scrollbar="true" scroll-left="0" :scroll-into-view="'id'+label_id">
						<view class="nav-label-tab" v-for="(item,index) in labelList" :data-index="index" :class="label_id == item.label_id ? 'nav-label-active' : ''" @click="tap(index)" :key="index" :id="'id'+item.label_id">
							{{item.label_name}}
						</view>
					</scroll-view>
					<view class="more_label" @click="is_label_list_popup = !is_label_list_popup"><image :src=" domain + '/uploads/def/20230630/bba7cebb1358e33d19bdece4204cb7ef.png'"/></view>
				</view>
				<view class="longTab" :class="is_label != 1 ? 'longTabNone' : ''">
					<view class="tab-item" v-for="(item,index) in tabList" :key="index" :class="{'on':item.type == type}" @click="bindTab(item.type)"><text>{{item.title}}</text></view>
				</view>
			</view>
		</view>
		<view class="body">
			<block v-if="list.length">
				<demand :list="list"></demand>
			</block>
			<emptyPage v-else title="暂无数据"></emptyPage>
		</view>
		<labelListPopup :is_label_list_popup="is_label_list_popup" :labelList="labelList" :tabId="navActive" @onChangeTag="onChangeTag"></labelListPopup>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	let app = getApp();
	import { getLabelList } from '@/api/api.js';
	import {
		recommendCommunity
	} from '@/api/circle.js';
	import {
		mapGetters
	} from "vuex";
	import authorize from '@/components/Authorize';
	import labelListPopup from '@/components/labelListPopup';
	import demand from '@/components/demand';
	import emptyPage from '@/components/emptyPage.vue';
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { getUserInfo } from '@/api/user.js';
	export default {
		components: {
			authorize,
			labelListPopup,
			demand,
			emptyPage
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				statusBarHeight: statusBarHeight, //系统导航条高度
				loading: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false ,//是否隐藏授权
				labelList: [],
				navActive: 0,
				label_id: 0,
				page: 1,
				isLoading: true,
				list: [],
				is_label_list_popup: false,
				type: '',
				tabList:[
					{
						title:'合作',
						type: '',
					},
					{
						title:'项目',
						type: 10,
					}
				],
				is_label: 1,
				navigationBarTitle: '今日需求',
			};
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		onLoad(options) {
			this.is_label = options.is_label ? options.is_label : 1;
			if (this.isLogin) {
			} else {
                this.isAuto = true;
                this.isShowAuth = true
			}
			this.label_id = options.label_id || 0
			this.getLabel();
			if(options.type && options.type == 10) {
				this.navigationBarTitle = '行业项目';
				this.type = options.type;
			}
			if(parseInt(this.is_label) == 2) {
				this.navigationBarTitle = '热门接单';
			}
		},
		mounted: function() {
		},
		methods: {
			/**
			 * 获取行业列表
			 */
			getLabel() {
				let that = this,
					customerIndustry = this.$Cache.get('customerIndustry'),
					engagedIndustry = this.$Cache.get('engagedIndustry'),
					is_sort = true;
				getLabelList({customerIndustry, engagedIndustry, is_sort, is_home: 1}).then(res=>{
					that.labelList = res.data.list;
					that.label_id = that.label_id || res.data.list[0].label_id
					that.getRecommendDemand()
				}).catch(err=>{
					console.log('err', err);
				})
			},
			bindTab(type){
				this.type = type
				this.page = 1
				this.isLoading = true
				this.list = [];
				this.getRecommendDemand();
			},
			tap(index) {
				this.navActive = index;
				this.label_id = this.labelList[index].label_id
				this.isLoading = true;
				this.page = 1;
				this.list = [];
				this.getRecommendDemand();
			},
			tap2(data) {
				this.tap(data.detail.current)
			},
			onChangeTag(data) {
				this.is_label_list_popup = false;
				this.navActive = data.index;
				this.label_id = this.labelList[data.index].label_id
				this.isLoading = true;
				this.page = 1;
				this.list = [];
				this.getRecommendDemand();
			},
			// 推荐行业需求
			getRecommendDemand() {
				let that = this;
				if(!that.isLoading) return false;
				let data = {
					is_type: 3,
					label_id: that.label_id, 
					page: that.page, 
					limit: 10,
					type: that.type,
				}
				recommendCommunity(data).then(res=>{
					if(res.status == 200) {
						that.list = that.list.concat(res.data.list);
						that.page++;
						that.isLoading = res.data.list.length >= 10;
					}
				}).catch(err=>{
					console.log('getRecommendCustomerr', err);
				})
			},
			/**
			 * 授权回调
			 */
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 后退
			returns: function() {
				uni.navigateBack()
			},
			// 首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				});
			},
			goUrl(url) {
				this.$util.Tips(url)
			}
		},
		onReachBottom() {
			this.getRecommendDemand();
		},
		/**
		 * 用户点击右上角分享
		 */
		// #ifdef MP
		onShareAppMessage: function() {
			let that = this;
			wx.showShareMenu({
				withShareTicket: true,
				menus: ['shareAppMessage', 'shareTimeline']
			});
			return {
				title: that.labelList[that.navActive].share_desc || '今日最新客户订单需求，各行业客户采购需求，合作需求。',
				imageUrl: that.labelList[that.navActive].image || 'https://img.jukee.net/def/95cec202404270947474003.jpg',
				path: '/pages/extends/community/community_demand?label_id='+that.labelList[that.navActive].label_id+'&spid=' + that.$Cache.get('UID')
			}
		}
		// #endif
	}
</script>

<style scoped lang="scss">
.body {
	padding: 0 30rpx;
}
.head-wrapper {
	z-index: 999;
	display: flex;
	align-items: center;
	padding: 0rpx 30rpx;
	background-color: #FFE103;
	position: sticky;
	top: 0;
}
.head-menu {
	display: flex;
	align-items: center;
	height: 54rpx;
	width: 140rpx;
	background: rgba(0, 0, 0, .25);
	border-radius: 27rpx;
	.iconfont {
		flex: 1;
		text-align: center;
		color: #fff;
		box-sizing: border-box;
		&.icon-xiangzuo {
			border-right: 1px solid #fff;
		}
	}
}
.head-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #000;
	line-height: 36rpx;
	margin-left: 20rpx;
	white-space: nowrap;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 350rpx;
	.send_community {
		background-color: #fff;
		padding: 10rpx;
		border-radius: 30rpx;
		font-size: 30rpx;
		font-weight: bold;
	}
}
.navTabBox{
		background: #fff;
		padding: 30rpx;
		position: sticky;
		top: 0;
		z-index: 1;
		// height: 90rpx;
	}
	.longTab{
		display: flex;
		text-align: center;
		border-top: 1px solid #000;
		margin-top: 10rpx;
		padding-top: 20rpx;
		// padding: 30rpx 0;
	}
	.longTabNone {
		padding: 0;
		border: none;
	}
	.tab-item{
		width: 50%;
		display: inline-block;
		line-height: 44rpx;
		position: relative;
		text{
			position: relative;
			display: inline-block;
			font-size: 36rpx;
			font-weight: 400;
			color: #1C211D;
		}
	}
	.tab-item:first-child {
		border-right: 1px solid #000;
	}
	.tab-item.on{
		color: var(--view-theme);
		text{
			font-weight: bold;
		}
		/* &:before{
			content: "";
			display: inline-block;
			width: 192rpx;
			height: 22rpx;
			background-color: var(--view-theme);
			position: absolute;
			left: 25%;
			bottom: 0;
		} */
	}
.popular_circle_tag {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	overflow: hidden;
	.nav-label-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex-wrap: nowrap;
		white-space: nowrap;
		width: 630rpx;
		.nav-label-tab {
			display: inline-block;
			white-space: nowrap;
			// height: 50rpx;
			// line-height: 50rpx;
			text-align: center;
			max-width: 160rpx;
			margin-right: 30rpx;
			position: relative;
			font-size: 36rpx;
			font-weight: 500;
			color: #000;
			padding-bottom: 20rpx;
		}
		.nav-label-active {
			font-size: 38rpx;
			color: #FE4504;
			&::after{
				/* content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx; */
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx;
			}
		}
	}
	.popular_circle_tag_list {
		flex: 1;
		display: flex;
		flex-wrap: nowrap;
		white-space: nowrap;
		grid-gap: 30rpx;
		overflow: hidden;
		.popular_circle_tag_item {
			font-size: 32rpx;
			font-weight: 500;
			color: #323232;
			line-height: 40rpx;
			margin-right: 40rpx;
			display: inline-block;
			position: relative;
			text-align: center;
		}
		.popular_circle_tag_item_on {
			font-size: 36rpx;
			font-weight: 500;
			line-height: 52rpx;
			height: 70rpx;
			&::after{
				content: '';
				transition: .5s;
				display: inline-block;
				width: 90%;
				height: 15rpx;
				background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
				position: absolute;
				left: 5%;
				bottom: 0rpx;
			}
		}
	}
	.more_label {
		width: 60rpx;
		display: flex;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
}
</style>
